<template>
    <div class="app-container  photoRegisterDailog">
        <div class="main-container-content">
            <el-row :gutter="10">
                <div class="contentBoxs_form">
                    <el-col :xs='24' :sm="24" :md="24" :lg="24" :xl="24">
                        <div class=" contentBoxs_form_box">
                            <div class="photoRegisterDailog_title">
                                <div class="titleContent_left">
                                    <div class="titleContent_left_line"></div>
                                    <div class="titleContent_left_title">
                                        病例切片集 <span class="miniTitle" v-if="teachInfo.teachingLibrariesName">({{
                                            teachInfo.teachingLibrariesName }})</span>
                                    </div>
                                </div>
                                <i class="el-icon-close photoRegisterClose" @click="closeEvent"></i>

                            </div>
                            <!-- 内容 -->
                            <!-- 内容 -->
                            <div class="contentDailog_contents active0" style="position:relative">
                                <div class="lists_containers_table">
                                    <el-table :data="tableData" style="width: 100%" border class="tablesContainers"
                                        v-loading="!tableIsReady">
                                        <el-table-column type="index" label="序号" width="60" fixed align="center">
                                            <template slot-scope="scope">
                                                <span>{{ getIndex(scope.$index) }}</span>
                                            </template>
                                        </el-table-column>

                                        <el-table-column fixed label="操作" :width="device == 'mobile' ? 120 : 120"
                                            align="center">
                                            <template slot-scope="scope">

                                                <el-button type="text" size="mini"
                                                    @click="addIndividualCase(scope.row)">详情</el-button>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="pathologyId" label="病理编号" width="130" align="center"
                                            sortable>
                                        </el-table-column>
                                        <el-table-column prop="labelUrl" label="切片标签" width="120" align="center">
                                            <template slot-scope="scope">
                                                <el-image style="width: 100px; height: 100px"
                                                    :src="getImgUrl(scope.row.labelUrl)"
                                                    :preview-src-list="[getImgUrl(scope.row.labelUrl)]"
                                                    fit="contain"></el-image>

                                            </template>
                                        </el-table-column>

                                        <el-table-column prop="previewUrl" label="缩略图" align="center">
                                            <template slot-scope="scope">
                                                <div @click="exclude(scope.row)">
                                                    <el-image style="width: 100px; height: 100px"
                                                        :src="getImgUrl(scope.row.previewUrl)" fit="contain"></el-image>
                                                </div>


                                            </template>
                                        </el-table-column>

                                        <el-table-column prop="specimenTypeName" label="标本类型" width="120" align="center">

                                        </el-table-column>
                                        <el-table-column prop="sampleOrganName" label="取材脏器" width="120" align="center">

                                        </el-table-column>
                                        <el-table-column prop="biopsyHistoryId" label="扫描批次" width="120" align="center">

                                        </el-table-column>


                                    </el-table>

                                </div>
                                <div class="paginationDiv dailogactive">
                                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                        :current-page.sync="scienceManagerTable.page"
                                        :page-sizes="[10, 20, 30, 40, 50, 100]" :page-size="10"
                                        layout="sizes, prev, pager, next,total" :total="scienceManagerTable.total">
                                    </el-pagination>
                                </div>
                            </div>

                        </div>

                    </el-col>
                </div>
            </el-row>

        </div>
        <!-- 新增个案 -->
        <div class="registerDailog" v-if="individualCasesDailog">
            <individualCases @close="closedDailog" :pathologyId="pathologyId" :diagnosisId="diagnosisId"
                :teachInfo="teachInfo">
            </individualCases>

        </div>
    </div>
</template>
    
<script>
import individualCases from './individualCases.vue'
export default {
    name: "sliceSet",
    dicts: [

    ],
    props: {
        individualCasesId: { //个案id
            type: [String, Number],
            default: '',
        },
        teachInfo: {
            type: Object,
            default: {},
        }

    },
    components: {
        individualCases
    },
    data() {
        return {
            imageServiceURL: process.env.VUE_APP_ImageServiceURL, // 图片服务器地址
            tableIsReady: false,
            individualCasesDailog: false,
            // 查询参数
            queryParams: {
                page: 0,
                size: 10,
                id: ''
            },
            tableData: [

            ],
            scienceManagerTable: {
                page: 1,
                size: 10,
                total: 0,
            },
            pathologyId: '',
            diagnosisId: ''

        };
    },
    computed: {
        device() {
            return this.$store.state.device
        }
    },
    mounted() {
        console.log(this.individualCasesId)
        this.diagnosisTableRequest();
    },
    methods: {
        exclude(val) {
            console.log(val)
            const { state } = this.$store;
            const { href } = this.$router.resolve({
                name: 'Viewer',
                path: '/Viewer',
                query: {
                    fileName: val.newFilename,
                    originFilename: val.originFilename,
                    pathologyId: val.pathologyId,
                    biopsyId: val.id,
                    authorization: this.$store.state.authorization,
                    userId: state.user.id
                }
            });
            const width = window.screen.availWidth + 10;
            const height = window.screen.availHeight + 10;
            window.open(
                href,
                'doctorWorkstation',
                `location=no,width=${width},height=${height}`
            );
        },
        // 真实序号计算（计算分页影响）
        getIndex(index) {
            return (
                (this.scienceManagerTable.page - 1) * this.scienceManagerTable.size + index + 1
            );
        },
        getImgUrl(url) {
            return this.imageServiceURL + url
        },
        // 诊断数据获取
        async diagnosisTableRequest() {
            this.tableIsReady = false;
            // 过滤条件为已保存的 formTemp 中获取
            this.queryParams.size = this.scienceManagerTable.size;
            this.queryParams.page = this.scienceManagerTable.page - 1;
            this.queryParams.id = this.individualCasesId; //该教学库ID
            const res = await this.$axios({
                method: 'POST',
                url: `/TeachingLibraries/findBiopsys`,
                data: this.queryParams,
            });

            if (res && res.data.code === 200) {
                // 请求成功
                const result = res.data;
                // 分页信息
                this.scienceManagerTable = {
                    total: result.pageInfo.total,
                    page: result.pageInfo.page + 1,
                    size: result.pageInfo.size,
                };

                // 查询结果数据
                this.tableData = [];
                let _this = this;
                if (result.data) {
                    result.data.forEach((t, index) => {
                        t.sliceSortingStatusName =
                            t.sliceSortingStatus == 0
                                ? '未整理'
                                : t.sliceSortingStatus == 1
                                    ? '已整理'
                                    : '';
                        t.sliceIsTumor =
                            t.sliceIsTumor == 0
                                ? '否'
                                : t.sliceIsTumor == 1
                                    ? '是'
                                    : '';
                        t.isAnnotationsInformationName =
                            t.isAnnotationsInformationName == 0
                                ? '未标注'
                                : t.isAnnotationsInformationName == 1
                                    ? '已标注'
                                    : '';
                    });
                    _this.tableData = result.data;
                }
            } else {
                this.$message.warning('请求失败');
            }

            this.tableIsReady = true;
        },
        checkPermission(row) { //判断是否有权限
            const { state } = this.$store;
            let userPermission = null;
            console.log(row.users)
            if (row.users === null || row.users === undefined) {
                if (state.user.id == 1) {
                    return true;
                }
            } else {
                return (userPermission = row.users.some((item) => {
                    return item.id == state.user.id || state.user.id == 1;
                }));
            }


        },
        addIndividualCase(row) {
            const userPermission = this.checkPermission(row);
            let diagnosisId = row.diagnosisId
            let pathologyId = row.pathologyId
            if (userPermission) {

                this.pathologyId = diagnosisId
                this.pathologyId = pathologyId
                this.individualCasesDailog = true
                this.stopScroll()
            } else {
                this.$message.info('您没有权限操作此条记录');
            }

        },
        handleSizeChange(val) {

            this.queryParams.size = val;

            console.log(`每页 ${val} 条`);
            this.handleQuery()
        },
        handleCurrentChange(val) {

            this.queryParams.size = val - 1
            console.log(`当前页: ${val}`);
            this.handleQuery()
        },
        handleQuery() {
            console.log("请求列表接口！")
        },
        submitForm() {
            this.$emit('close')
        },
        closeEvent() {
            this.$emit('close')
        },
        closedDailog() {
            this.individualCasesDailog = false
            this.canScroll()
        }
    }
};
</script>
    
<style scoped lang="scss">
.photoRegisterDailog {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    overflow: hidden;

    .photoRegisterDailog_title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;

    }
}

.lists_containers_table {
    height: calc(100% - 40px);
    overflow: hidden;
    overflow-y: auto;
}
</style>
    
    